<template>
	<view class="merchant">
		<view class="merchant-hd">
			<image
				class="merchant-hd-image"
				:src="avatar | avatar('xc200')"
				mode="aspectFill"
				@click="onImgsUpload"
			></image>
		</view>
		<view class="merchant-bd">
			<view class="merchant-li">
				<text class="merchant-li-l">昵称（公司名）</text>
				<view class="merchant-li-r">
					<input
						v-model="nickname"
						class="input-inner"
						placeholder="请输入昵称"
						type="text"
						maxlength="12"
					/>
				</view>
			</view>
			<view class="merchant-li">
				<text class="merchant-li-l">手机</text>
				<view class="merchant-li-r">
					<input
						v-model="phone"
						disabled
						class="input-inner"
						placeholder="请输入手机号"
						type="number"
						maxlength="11"
					/>
					<view class="text-primary" @click="changePhone">更改手机</view>
				</view>
			</view>
			<view class="btn-area">
				<pys-button width="320" height="64" @click="submit">确定修改</pys-button>
			</view>
		</view>
		<modal-phone ref="modalPhone"></modal-phone>
	</view>
</template>

<script>
export default {
	name: 'HomeMerchantManage',
	data() {
		return {
			avatar: '',
			nickname: '',
			phone: ''
		};
	},
	computed: {
		userInfo() {
			let result = this.$store.state.user.userInfo;
			return result;
		}
	},
	watch: {
		userInfo(nVal) {
			this.avatar = nVal.avatar_url;
			this.nickname = nVal.nickname;
			this.phone = nVal.phone;
		}
	},
	//方法
	methods: {
		changePhone() {
			this.$refs['modalPhone'].open();
		},
		onImgsUpload() {
			const count = 1;
			this.$http.qnImgUpload({
				count: count,
				onBeforeUpdate: res => {
					uni.showLoading({
						title: '加载中'
					});
				},
				onEachUpdate: res => {
					this.avatar = res.key;
					this.$apis.user.update({ avatar_url: this.avatar })
						.then(res => {
							this.$store.commit('user/setUserInfo', res);
							uni.hideLoading();
						});
				},
			});
		},
		submit() {
			let params = {
				avatar_url: this.avatar,
				nickname: this.nickname
			};
			if (!params.nickname) {
				this.$g.toast('昵称不能为空');
				return;
			}
			this.$apis.user.update(params, { isLoad: true })
				.then(res => {
					this.$g.toast('修改成功', () => {
						uni.navigateBack();
					});
					this.$store.commit('user/setUserInfo', res);
				});
		}
	},
	mounted() {
		this.avatar = this.userInfo.avatar_url;
		this.nickname = this.userInfo.nickname;
		this.phone = this.userInfo.phone;
	}
};
</script>
<style lang="scss" scoped>
.merchant {
	background-color: #fff;
	height: 100vh;
}
.merchant-hd {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 72rpx 0;

	&-image {
		flex: 0 0 256rpx;
		width: 256rpx;
		height: 256rpx;
		border-radius: 50%;
	}
}

.merchant-li {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 30rpx;
	line-height: 30rpx;
	margin-bottom: 48rpx;

	&-l {
		flex: 0 0 220rpx;
	}
	&-r {
		display: flex;
		align-items: center;
		width: 440rpx;
		height: 64rpx;
		padding: 0 16rpx;
		background: #f6f6f6;

		.input-inner {
			flex: 1 0 1%;
			font-size: 30rpx;
			text-align: center;
		}
	}
}

.btn-area {
	position: fixed;
	bottom: 120rpx;
	left: 0;
	right: 0;
	display: flex;
	justify-content: center;
}
</style>
